<template>
  <div class="quiz-role-wrapper">
    <p>{{ CONSTANTS.LABEL_WHOAMI }}</p>
    <p v-for="item in list" :key="item.name" @click="onClk(item)">
      <i>{{ item.value }}</i>
    </p>
  </div>
</template>
<script>
import STORE from '@/store/index'
import * as CONSTANTS from '@/constants/index'

export default {
  props: {},
  components: {},
  data() {
    return {
      CONSTANTS: Object.freeze(CONSTANTS),
      list: [
        {
          name: CONSTANTS.LABEL_ROLE_FATHER_NAME,
          value: CONSTANTS.LABEL_ROLE_FATHER_VALUE,
        },
        {
          name: CONSTANTS.LABEL_ROLE_MOTHER_NAME,
          value: CONSTANTS.LABEL_ROLE_MOTHER_VALUE,
        },
        {
          name: CONSTANTS.LABEL_ROLE_OTHER_NAME,
          value: CONSTANTS.LABEL_ROLE_OTHER_VALUE,
        },
      ],
    }
  },
  computed: {},
  mounted() {
    let data = window.sessionStorage.getItem(CONSTANTS.STORAGE_VUEX_STATE)
    data = JSON.parse(data)
    this.$store.replaceState(Object.assign({}, data))

    window.onbeforeunload = () => {
      this.$store.commit(CONSTANTS.COMMIT_STORAGE_VUEXSTATE)
    }
  },
  filters: {},
  watch: {},
  methods: {
    onClk(item) {
      const { name, value } = item
      this.$store.commit(CONSTANTS.COMMIT_UPDATE_QUIZ_ROLE, name)
      this.$store.commit(CONSTANTS.COMMIT_STORAGE_VUEXSTATE)
      // this.$router.push({
      //   path: '/quiz/questions',
      // })
      this.$store.dispatch(CONSTANTS.DISPATCH_REDIRECT, {
        path: '/quiz/questions',
        isRouter: true,
      })
    },
  },
}
</script>

<style lang="less" scoped>
.quiz-role-wrapper {
  & > p {
    margin: 0;
  }

  & > p:first-of-type {
    margin-top: 62px;
    text-align: center;
    line-height: 20px;
    font-family: 'SourceHanSansCN-Medium';
    font-size: 20px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: rgba(0, 0, 0, 0.8);
  }

  & > p:not(:first-of-type) {
    margin: 0 auto;
    margin-top: 22px;
    width: 83%;
    height: 48px;
    border-radius: 26px;
    border: solid 1px rgba(0, 0, 0, 0.15);
    display: flex;
    justify-content: center;
    align-items: center;
    & > i {
      font-style: normal;
      line-height: 17px;
      font-family: 'SourceHanSansCN-Regular';
      font-size: 17px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: rgba(0, 0, 0, 0.8);
    }
  }

  & > p:nth-of-type(2) {
    margin-top: 78px;
  }

  & > p:not(:first-of-type):active {
    background-color: rgba(255, 102, 102, 0.06);
    border: solid 1px #ff6666;
  }
}
</style>
